<template>
<!-- 企业交易商-认证 -->
  <div class='enterprise-auth-wrapper'>
    <el-steps :active="active" align-center>
      <el-step title="填写认证信息"></el-step>
      <el-step title="等待审核"></el-step>
      <el-step title="审核结果" :status="currentStatus"></el-step>
    </el-steps>
    <el-form v-if="active === 0" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" size="small">
      <el-form-item label="企业名称" prop="enterpriseName">
        <el-input v-model="ruleForm.enterpriseName" placeholder="必须填写与营业执照一致的企业名称"></el-input>
      </el-form-item>
      <el-form-item label="企业类型" prop="enterpriseType">
        <el-select v-model="ruleForm.enterpriseType" placeholder="请选择企业类型" clearable filterable>
          <el-option v-for="item in enterpriseTypeOption" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通讯地址" required>
        <el-col :span="11">
          <el-form-item prop="province">
            <el-select v-model="ruleForm.province" placeholder="请选择省份" clearable filterable @change="ruleForm.city = ''">
              <el-option v-for="item in provinceOption" :key="item.label" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2" class="line">-</el-col>
        <el-col :span="11">
          <el-form-item prop="city">
            <el-select v-model="ruleForm.city" placeholder="请选择市级" clearable filterable>
              <el-option v-for="item in cityOption" :key="item.label" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="ruleForm.address" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="creditCode">
        <el-input v-model="ruleForm.creditCode" placeholder="请输入18位的统一社会信用代码"></el-input>
      </el-form-item>
      <el-form-item label="邮箱地址" prop="email">
        <el-input v-model="ruleForm.email" placeholder="请输入邮箱地址"></el-input>
      </el-form-item>
      <el-form-item label="法定代表人姓名" prop="legalRepresentative">
        <el-input v-model="ruleForm.legalRepresentative" placeholder="请输入法定代表人姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">申请认证</el-button>
      </el-form-item>
    </el-form>
    <div v-else-if="active === 1" class="audit-status">
      <i class="iconfont font-blue">&#xe61c;</i>
      <h2>审核中</h2>
      <p>我们已接到您的认证申请，将会在<span class="font-red">1-2个工作日</span>内完成审核，请耐心等待，谢谢！</p>
    </div>
    <div v-else-if="active === 2" class="audit-status">
      <i class="iconfont font-green">&#xe61a;</i>
      <h2>审核通过</h2>
      <p>恭喜您已认证为<span class="font-red">【企业交易商】</span>，您将获得<span class="font-red">【发布服务】、【查看联系方式】</span>等功能，赶快去探索新的功能吧！</p>
    </div>
    <div v-else-if="active === 3" class="audit-status">
      <i class="iconfont font-red">&#xe634;</i>
      <h2>审核不通过</h2>
      <p>请核对并修改一下信息后，再重新提交。</p>
      <!-- <div class="tips">
        <h4>反馈建议</h4>
        <p class="tips-content">您的营业执照编号有误，请重新核对提交！</p>
      </div> -->
      <el-button type="primary" size="small" class="mt50" @click="active = 0">重新认证</el-button>
    </div>
  </div>
</template>

<script>
import { modifyUserInfo } from "@/api/login";
import { validateCreditCode, validateEmail } from "@/utils/validate";
import areaData from "@/mixins/areaData"

export default {
  name: "EnterpriseAuthentication",
  mixins: [areaData],
  data() {
    return {
      active: 0,
      userInfo: {},
      ruleForm: {
        enterpriseName: '', // 企业名称
        enterpriseType: '', //	企业类型
        province: '', // 省
        city: '', // 市
        address: '', // 详细地址
        creditCode: '', // 统一社会信用代码
        email: '', // 邮箱地址
        legalRepresentative: '', // 法定代表人
      },
      rules: {
        enterpriseName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        enterpriseType: [
          { required: true, message: '请选择企业类型', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择省份', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择市级', trigger: 'change' }
        ],
        creditCode: [
          { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
          { validator: validateCreditCode, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        legalRepresentative: [
          { required: true, message: '请输入法定代表人姓名', trigger: 'blur' }
        ]
      },
      enterpriseTypeOption: [],
      provinceOption: this.getProvince()
    };
  },
  computed: {
    cityOption() {
      return this.getRegion(this.ruleForm.province, true);
    },
    currentStatus() {
      const statusMap = {
        2: 'success',
        3: 'error'
      }
      return statusMap[this.active] || ''
    }
  },
  created() {
    this.getDicts('enterprise_type').then(response => {
      this.enterpriseTypeOption = response.data
    });
  },
  mounted() {
    this.getUserInfo()
  },
  methods:{
    getUserInfo() {
      this.$store.dispatch('getInfo').then((res) => {
        if (res.code === 200) {
          this.userInfo = res.data
          // Object.keys(this.ruleForm).forEach(key => {
          //   this.ruleForm[key] = this.userInfo[key]
          // })
          if (this.userInfo.authType === '1') {
            this.active = this.userInfo.state * 1
          }
        }
      }).catch(error => {
        console.log(error)
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const params = {
            id: this.userInfo.id,
            state: '1',
            authType: '1',
            ...this[formName]
          }
          const res = await modifyUserInfo(params)
          if (res.code === 200) {
            this.message.success('申请成功')
            this.getUserInfo()
            this.resetForm(formName)
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
};
</script>

<style scoped lang='scss'>
@import "@/style/color.scss";
.enterprise-auth-wrapper {
  width: 90%;
  margin: 0 auto;
}
.el-steps {
  margin: 20px 0;
}
.el-col {
  .el-form-item {
    margin: 0;
  }
}
.el-select {
  width: 100%;
}
.line {
  text-align: center;
}
.font-blue {
  color: $blueColor;
}
.font-green {
  color: $greenColor;
}
.font-red {
  color: $redColor;
}
.audit-status {
  margin-top: 50px;
  text-align: center;
}
.iconfont {
  font-size: 60px;
}
.mt50 {
  margin-top: 50px;
}
</style>
